<template>
	<view class="content">
		<view class="contents">
			<view class="uni-form-item uni-column">
				<view class="title">姓名：</view>
				<input class="uni-input" focus placeholder="请输入您的姓名" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">联系方式：</view>
				<input class="uni-input" focus placeholder="请输入您的手机号" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">公司名称：</view>
				<input class="uni-input" focus placeholder="请输入公司名称" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">主营产品：</view>
				<input class="uni-input" focus placeholder="请输入产品名称" />
			</view>
			<view class="upload_img">
				<!-- https://ext.dcloud.net.cn/plugin?id=2922 上传图片插件路径-->
				<view class="title">产品图片：</view>
				<htz-image-upload :max="3" v-model="ceshiData" @uploadSuccess="ceshiUploadSuccess" action="http://localhost:8080/pages/index/contacts/contacts"></htz-image-upload>
			</view>
			<view class="bottom">
				<text>完成</text>
			</view>
		</view>
	</view>
</template>

<script>
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
export default {
	data() {
		return {
			ceshiData: []
		};
	},
	components: {
		htzImageUpload
	},
	methods: {
		ceshiUploadSuccess(res) {
			console.log(res)
			//上传成功
			/****************
			                因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
			                ***************/
			var _res = JSON.parse(res.data);
			if (_res.code == 200) {
				this.ceshiData.push(_res.result);
			}
			/*******************************/
		}
	}
};
</script>

<style lang="less">
.content {
	background: #f2f2f2;
	padding: 20upx;
	height: 90.4vh;
	overflow: hidden;
	.contents {
		height: 720upx;
		background: #ffffff;
		border-radius: 20px;
		.uni-form-item {
			display: flex;
			height: 13px;
			border-bottom: 0.5px solid #f2f2f2;
			padding: 20px 20px;

			.uni-input-placeholder {
				font-size: 22upx;
			}
		}
		.title {
			width: 150upx;
			height: 27upx;
			font-size: 28upx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #333333;
		}
		.upload_img {
			padding: 40upx 40upx;
			.title {
				margin-bottom: 20upx;
			}
			.htz-image-upload-Item {
				margin: 0 !important;
			}
		}
		.bottom{
			width: 100%;
			height: 200upx;
			uni-text{
				background: linear-gradient(0deg, #E50012, #DF3F29);
				border-radius: 44upx;
				color: #FFFFFF;
				font-size: 36upx;
				padding:20upx 100upx;
				    position: relative;
				    top: 35%;
				    left: 25%;
			}
		}
	}
}
</style>
